import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Flex } from "antd-mobile";
import s from "./index.scss";
import AxFooter from 'components/Footer'
import AxHeader from 'components/AxHeader'
import tipsRed from 'assets/images/tipsRed.png'

import {callApi} from 'app/utils'


export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
        info:{},
        idCard:'',
        realName:''
    };
  }

  componentDidMount() {
    let userData
    if(localStorage.getItem('userData')!=undefined&&localStorage.getItem('userData')!="undefined"){
        userData = JSON.parse(localStorage.getItem('userData'))
       }
      
    callApi('/account/load/FQ/banks',{token:JSON.parse(localStorage.getItem('userData')).token},"POST").then((data)=>{
        this.setState({
            info:data.data
        })
    })
    this.setState({
        idCard:userData.idCardNo,
        realName:userData.realname
    })
  }
  
  confirm(){
    callApi('/account/bindCard/page',{token:JSON.parse(localStorage.getItem('userData')).token},"POST").then((data)=>{
        location.href = data.data.ret_url;
    })
  }

  render() {
      let str
      if(JSON.stringify(this.state.info)!='{}'){
        str = this.state.info.bankList.map((item,index)=>{
            return (
                <Flex key={item.bankCode} className={`${s.bankItem}`} direction="row">
                    <Flex className={`${s.left} flex2`}><img src={item.imgUrl}/></Flex>
                    <Flex className={`${s.right} flex8`} direction="column">
                        <Flex  className={`${s.rightTop}`}>{item.bankName}</Flex>
                        <Flex  className={`${s.rightBot}`}>单笔限额：{item.countAmountLimit}&nbsp;&nbsp;每日限额：{item.dayAmountLimit}</Flex>
                    </Flex>
                </Flex>    
            )
        })
      }
    return (
      <div className={`${s.bindBankBox}`}>
        <AxHeader/>
        <Flex className={`${s.item}`}>
            <Flex.Item className={`${s.left} flex3 text-center`}>真实姓名:</Flex.Item>
            <Flex.Item className={`${s.right} flex7`}>{this.state.realName}</Flex.Item>
        </Flex>
        <Flex className={`${s.item}`}>
            <Flex.Item className={`${s.left} flex3 text-center`}>身份证号:</Flex.Item>
            <Flex.Item className={`${s.right} flex7`}>{this.state.idCard}</Flex.Item>
        </Flex>
        <Flex direction="row" align="center" className={`${s.tip}`}><img src={tipsRed}/><span>仅支持绑定一张银行卡，推荐选择限额高的银行卡。</span></Flex>
        <Flex className={`${s.bankBox}`} direction="column">
            {str}
        </Flex>
        <div className={`${s.confirmBtn}`} onClick={this.confirm.bind(this)}>
            确认
        </div>
      </div>
    );
  }
}
